<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="./css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body style="background-color: white">
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label required">客户ID</label>
        <div class="layui-input-block">
            <input type="text" name="CustomerId" lay-verify="required|id" lay-reqtext="客户ID不能为空" placeholder="请输入客户ID" value="" class="layui-input" autocomplete="off">
            <div class="layui-input-inline">
                <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="searchCustomer">
                    <i class="layui-icon layui-icon-user" style="color: #1E9FFF"></i>
                </button>
            </div>
<%--            <tip>填写办理业务的客户ID。</tip>--%>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required" >办理类型</label>
        <div class="layui-input-block">
            <select name="processingType" lay-filter="processingTypeSelect" lay-verify="required" id="tt">
                <option value=""></option>
                <option value="包月">包月</option>
                <option value="包年">包年</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">付费日期</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd"  name="payDate"  lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required" >办理时长</label>
        <div class="layui-input-block">
            <select name="payTime" lay-filter="payTimeSelect"  lay-verify="required" id="payTime">
            </select>
        </div>
    </div>
    <%--<div class="layui-form-item">
        <label class="layui-form-label required">到期日期</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" id="test2" placeholder="yyyy-MM-dd"  name="maturityDate"  lay-verify="required">
        </div>
    </div>--%>
    <div class="layui-form-item">
        <label class="layui-form-label " >付费金额</label>
        <div class="layui-input-block">
            <span style="line-height: 38px;color: teal" id="cost">0</span>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required" >付费类型</label>
        <div class="layui-input-block">
            <select name="payType" lay-filter="required|select"  lay-verify="required">
                <option value=""></option>
                <option value="1">支付宝</option>
                <option value="2">现金支付</option>
                <option value="3">微信支付</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">经办人ID</label>
        <div class="layui-input-block">
            <input type="hidden" name="userId"  value="${User.id}" class="layui-input" autocomplete="off">
            <input type="text" disabled name="userId" value="${User.id}" class="layui-input" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认添加</button>
        </div>
    </div>
</div>
<script src="./layui/layui.js"></script>
<script>
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate,
            $ = layui.$;

        form.verify({
            id: [
                /^[\S]{1,9}$/
                , '用户ID必须1到9位，且不能出现空格'
            ],
        });

        $("#searchCustomer").click(function (){
            window.parent.parent.layer.open({
                type: 2,
                title: '很多时候，我们想左右协同，比如像这个页面。',
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['893px', '600px'],
                content: './customerTable'
            });
        })


        var selectType;

        //选择框联动
        form.on('select(processingTypeSelect)', function(data){
            $("#cost").text(0);
            // console.log(data);
            console.log(data.value)
            console.log(data.value=='包年')
            selectType=data.value;
            $("#payTime").empty();
            if(data.value=='包年'){
                $("#payTime").append(new Option('',""));
                $("#payTime").append(new Option('1年',"1"));
                $("#payTime").append(new Option('2年',"2"));
                $("#payTime").append(new Option('3年',"3"));
            }else{
                $("#payTime").append(new Option('',""));
                $("#payTime").append(new Option('1月',"1"));
                $("#payTime").append(new Option('2月',"2"));
                $("#payTime").append(new Option('3月',"3"));
            }
            form.render('select');

        });
        form.on('select(payTimeSelect)', function(data){
            console.log(data);
           console.log(selectType);
           if(selectType=='包年'){

               let cost=data.value*${包年};
               $("#cost").text(cost);
           }else{
               let cost=data.value*${包月};
               $("#cost").text(cost);
           }

        });

        //日期时间选择器
        laydate.render({
            elem: '#test1',
            // type: 'datetime'
        });
        laydate.render({
            elem: '#test2',
            // type: 'datetime'
        });

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {
                $.ajax({
                    url:'./addOrder',
                    type:'post',
                    data:data.field,

                    success:function(data){
                        if(JSON.parse(data).status == 'error'){
                            layer.msg(JSON.parse(data).msg,{icon: 5});//失败的表情
                            o.removeClass('layui-btn-disabled');
                            layer.open({
                                title: '提示信息'
                                ,content: '出错了'
                            });
                            return;
                        }else{
                            layer.msg(JSON.parse(data).msg, {
                                icon: 6,//成功的表情
                                time: 2000 //1秒关闭（如果不配置，默认是3秒）
                            }, function(){
                                //关闭弹出层
                                layer.close(index);
                                let iframeIndex = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(iframeIndex);
                                window.parent.location.reload();
                            });
                        }
                    },
                    error:function(e){
                        layer.msg("失败",
                            {icon: 5},
                            function(){
                                location.reload();
                            });//失败的表情
                        console.log(e);
                    },

                });


            });

            return false;
        });

    });
</script>
</body>
</html>